<template>
	<div class="rightBox"   :class="!drawerShow?'zeroWidth':''">
		<h4>公式生成器</h4>
		<div class="sensorTree">
			<el-input
			  style="width:98%;display:block;margin:0 auto;"
			  placeholder="输入关键字进行过滤"
			  v-model="filterText">
			</el-input>
			<el-tree
			  style="margin-top:0.1rem;"
			  class="filter-tree"
			  :data="sensorTree"
			  @node-click="sendSensorString"
			  default-expand-all
			  :filter-node-method="filterNode"
			  ref="tree">
			</el-tree>
		</div>
		<div class="stringBox">
			<div>
				<span style="font-size:0.3rem;float:left;">计算公式：<span>先点击数据点，后插入运算符</span></span>
				<el-button size="mini"  v-if="sensorString" @click="reSetString" style="float: right;vertical-align:middle;">清空</el-button>
			</div>
			<el-input  type="textarea" ref="sensorString" v-model="sensorString" :autosize="{minRows:7,maxRows:20}"></el-input>
		</div>
	</div>
</template>

<script>
	export default {
	    name: 'FormulaCreater',
	    data() {
	        return {
				filterText:'',
	            sensorString:'',
				sibling:[]
	        }
	    },
	    props: ['drawerShow',
		        //'filterText', 
				'sensorTree', 
				'getSensorString',
				'appType'
				//'filterNode',
				//'sensorString',
				//'reSetString'
			],
		watch: {
		   filterText(val) {
			  this.$refs.tree.filter(val);
		   },
		   sensorString(val){
			  this.getSensorString(this.sensorString.trim()); 
		   },
		   drawerShow(val){
			   if(!val){
				   this.sensorString="";
			   }
		   }
		},
		
		created(){
			console.log(this.appType);
		},
		
		methods:{
			filterNode(value, data) {
				if (!value) return true;
				return data.label.indexOf(value) !== -1;
			},
			
			sendSensorString(data,node,ele){
				//console.log(data);
				if(!data.data_key){
					return
				}
				this.sibling=ele.$el.parentNode.children;
				// for(let i=0;i<this.sibling.length;i++){
				// 	  this.sibling[i].style.color="#333";
				// }
				ele.$el.style.color = "#409eff";
				let str=""
				if(this.appType=="device"){
				   str='$product["'+data.equip_code+'"]["devices"]["'+data.slave_no+'"]["variables"]["'+data.data_key+'"]'+'  ';
				}else{
				   str='$devices["'+data.slave_no+'"]["variables"]["'+data.data_key+'"]'+'  ';
				}
				this.sensorString=this.sensorString + str;
			},
			
			reSetString(){
				this.sensorString="";
				for(let i=0;i<this.sibling.length;i++){
					this.sibling[i].style.color="#333";
				}
			}
		}
		
	}
</script>

<style scoped>
	.rightBox{
		position:fixed;
		top:0;
		right:0;
		bottom:0;
		z-index:999;
		width:20%;
		box-sizing: border-box;
		opacity:1;
		overflow: auto;
		font-size: 0.3rem;
		/* height:100%; */
		padding:0.2rem;
		padding-top:0.1rem;
		background-color: #fff;
		box-shadow:2px 2px 12px #666;
		border-radius:4px 0 0 4px;
		transition:all 500ms linear;
		/* border:1px solid red; */
	}
	
	.zeroWidth{
		box-sizing: border-box;
		width:0!important;
		opacity: 0;
		overflow: hidden;
	}
	
	.rightBox h4{
		width:100%;
		font-size: 0.3rem;
		font-weight:normal;
		/* font-weight:700; */
		height:0.8rem;
		line-height:0.8rem;
		border-bottom:1px solid #ccc;
		
	}
	
	.sensorTree{
		min-height:1rem;
		max-height: calc(100% - 5.6rem);
		box-sizing: border-box;
		border-radius:5px;
		margin-top:0.2rem;
		padding-top:0.1rem;
		overflow: auto;
		color:#333;
		border:1px solid #ccc;
	}
	
	.sensorTree /deep/ .el-tree-node__content .el-tree-node__label{
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}
	
	.sensorTree /deep/ .el-tree-node__content .is-leaf{
		width:0!important;
		height:0!important;
		padding:3px!important;
		overflow: hidden;
		/* padding-left:28px!important; */
	}
	
	.stringBox{
		/* position:absolute;
		bottom:0; */
		width:100%;
		box-sizing:border-box;
		margin-top:0.2rem;
		min-height:4rem;
		line-height:0.7rem;
		/* border:1px solid blue; */
	}
	/* .sensorString{
		display:inline-block;
		width:100%;
		border:1px solid #ccc;
		border-radius: 2px;
		padding-left:2px;
		padding-right:2px;
		height:0.6rem;
		line-height:0.6rem;
	} */
	.stringBox /deep/ .el-textarea__inner{
		height:auto;
		padding-left:2px;
		padding-right:2px;
	}
</style>